<template>
	<!-- 宽带套餐 -->
	<el-row :gutter="20">
		<!-- 左侧部门树 -->
		<el-col :span="4" :xs="24">
			<ContentWrap class="h-1/1">
				<CommunityTree @node-click="handleCommunityNodeClick" />
			</ContentWrap>
		</el-col>
		<el-col :span="20" :xs="24">
			<ContentWrap>
				<!-- 搜索工作栏 -->
				<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
					<el-form-item label="中间件" prop="netSysId">
						<el-select v-model="queryParams.netSysId" placeholder="中间件" class="!w-240px" clearable>
							<el-option v-for="n in sysConfigList" :key="n.id" :label="n.community.name" :value="n.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="套餐类型" prop="packName">
						<el-select class="!w-120px" v-model="queryParams.packType" clearable placeholder="套餐类型" @change="handleQuery">
							<el-option v-for="dict in netPackageArr" :key="dict.value" :label="dict.label" :value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="运营商" prop="packName">
						<el-select class="!w-120px" v-model="queryParams.serviceProvider" clearable placeholder="运营商" @change="handleQuery">
							<el-option v-for="dict in netOperatorArr" :key="dict.value" :label="dict.label" :value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="上网模式" prop="netMode">
						<el-select class="!w-140px" v-model="queryParams.netMode" clearable placeholder="上网模式" @change="handleQuery">
							<el-option v-for="n in netPackageAttributesArr" :key="n.value" :label="n.label" :value="n.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="状态" prop="packStatus">
						<el-select class="!w-120px" v-model="queryParams.packStatus" clearable placeholder="状态" @change="handleQuery">
							<el-option v-for="dict in packStatusArr" :key="dict.value" :label="dict.label" :value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="标题" prop="packName">
						<el-input v-model="queryParams.packName" placeholder="请输入套餐名称" clearable @keyup.enter.stop="handleQuery" />
					</el-form-item>
					<el-form-item>
						<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />搜索</el-button>
						<el-button type="primary" plain v-hasPermi="['zwsj:net-package:create']" @click="openForm('create', undefined, queryParams.commId, queryParams.serviceProvider)">
							<Icon icon="ep:plus" class="mr-5px" />新增</el-button
						>
					</el-form-item>
				</el-form>
			</ContentWrap>
			<ContentWrap>
				<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
					<el-table-column label="状态" align="left" width="55">
						<template #default="scope">
							<div style="color: #409eff" v-if="scope.row.packStatus == 1">正常</div>
							<div style="color: red" v-if="scope.row.packStatus == 2">停用</div>
						</template>
					</el-table-column>
					<el-table-column label="社区/中间件" align="left" width="180">
						<template #default="scope">
							<div>社区：{{ scope.row.community.name }}</div>
							<template v-for="item in sysConfigList">
								<div :key="item.id" v-if="item.id == scope.row.netSysId">中间件：{{ item.community.name }}</div>
							</template>
							<div>凌风系统套餐id：{{ scope.row.lfPackId }}</div>
						</template>
					</el-table-column>

					<el-table-column label="套餐类型/套餐名称/运营商" align="left">
						<template #default="scope">
							<template v-for="item in netOperatorArr">
								<div :key="item.value" v-if="scope.row.serviceProvider == item.value">运营商：{{ item.label }}</div>
							</template>
							<div style="display: flex; align-items: center">
								<template v-for="item in netPackageArr">
									<div :key="item.value" v-if="scope.row.packType == item.value">套餐类型：{{ item.label }}</div>
								</template>
								<template v-for="item in netPackageAttributesArr">
									<div :key="item.value" v-if="scope.row.netMode == item.value">（{{ item.label }}）</div>
								</template>
							</div>
							<div>套餐名称：{{ scope.row.packName }}</div>
						</template>
					</el-table-column>
					<el-table-column label="价格/时长/速度" align="left" width="180">
						<template #default="scope">
							<div>价格：{{ divide(scope.row.price, 100) }}</div>
							<div>时长：{{ scope.row.duration }}</div>
							<div>速度：{{ scope.row.speed ? scope.row.speed + 'MB' : '' }}</div>
						</template>
					</el-table-column>
					<el-table-column label="购买次数限制/排序/备注" align="left" width="180">
						<template #default="scope">
							<div>购买次数限制：{{ scope.row.buyTimes }}</div>
							<div>排序：{{ scope.row.sort }}</div>
							<div>备注：{{ scope.row.remark }}</div>
						</template>
					</el-table-column>

					<el-table-column label="操作" align="center" fixed="right" width="120">
						<template #default="scope">
							<el-button link type="primary" @click="openForm('update', scope.row.id)" v-hasPermi="['zwsj:net-package:update']">编辑</el-button>
							<el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['zwsj:net-package:delete']">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="getList" />
			</ContentWrap>
		</el-col>
	</el-row>
	<!-- 表单弹窗：添加/修改 -->
	<NetPackageForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
	import CommunityTree from '@/views/zwsj/common/CommunityTree.vue'
	import NetPackageForm from './NetPackageForm.vue'
	import { getNetSysConfigs } from '@/api/zwsj/netSysConfig'
	import * as NetPackageApi from '@/api/zwsj/netPackage'
	import { convertSecondsToUnit } from '@/utils/tools'
	import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
	import { divide } from '@/utils/tools'

	const loading = ref(true) // 列表的加载中
	const message = useMessage() // 消息弹窗
	const { t } = useI18n() // 国际化
	const total = ref(0) // 列表的总页数
	const list = ref([]) // 列表的数据
	const sysConfigList = ref([])

	const queryParams = reactive({
		pageNo: 1,
		commId: null,
		pageSize: 10,
		netSysId: null,
		packName: null,
		serviceProvider: null,
		packType: null,
		netMode: null,
		packStatus: null,
	})
	const netPackageArr = getIntDictOptions(DICT_TYPE.NET_PACKAGE) //宽带套餐类型
	const netOperatorArr = getIntDictOptions(DICT_TYPE.NET_OPERATOR) //宽带运营商
	const netPackageAttributesArr = getIntDictOptions(DICT_TYPE.PACKAGE_ATTRIBUTES) // 宽带套餐属性
	const packStatusArr = reactive([
		{ label: '正常', value: 1 },
		{ label: '停用', value: 2 },
	])
	/** 处理区域被点击 */
	const handleCommunityNodeClick = async row => {
		queryParams.commId = row.id
		await getList()
	}

	/** 查询列表 */
	const getList = async () => {
		loading.value = true
		try {
			const data = await NetPackageApi.getPage(queryParams)
			const array = data.list
			array.forEach(item => {
				if (item.duration) {
					const arr = convertSecondsToUnit(item.duration)
					item.duration = `${arr[1]}${arr[0] == 'year' ? '年' : arr[0] == 'month' ? '月' : '天'}`
				}
			})

			list.value = array
			total.value = data.total
		} finally {
			loading.value = false
		}
	}

	/** 搜索按钮操作 */
	const handleQuery = () => {
		queryParams.pageNo = 1
		getList()
	}

	/** 添加/修改操作 */
	const formRef = ref()
	const openForm = (type: string, id?: number, commId?: number, serviceProvider?: number) => {
		formRef.value.open(type, id, commId, serviceProvider)
	}

	/** 删除按钮操作 */
	const handleDelete = async (id: number) => {
		try {
			// 删除的二次确认
			await message.delConfirm()
			// 发起删除
			await NetPackageApi.deletePackage(id)
			message.success(t('common.delSuccess'))
			// 刷新列表
			await getList()
		} catch {}
	}

	//初始化
	onMounted(() => {
		getNetSysConfigs().then(data => {
			sysConfigList.value = data
		})
		getList()
	})
</script>
<style lang="scss" scoped></style>
